<template>
  <div class="container">
    <van-tabs v-model="active" swipeable class="tabs">
      <van-tab title="待提货">
        <div class="imga">
          <van-empty class="custom-image" :image="require('../assets/sj_nodata.b56179d2.png')" description="未找到相关任务" />
        </div>

      </van-tab>
      <van-tab title="在途">内容 2</van-tab>
      <van-tab title="已完成">
        <div>
          <div>
            <van-search v-model="search" shape="round" placeholder="请输入运单号" :input-align="left" />
            <div class="shaixuan">
              <van-field readonly clickable name="calendar" :value="valueOne" :center="true" placeholder="开始日期"
                @click="showCalendar = true" />
              <span>至</span>
              <van-field readonly clickable name="calendar" :value="valueTwo" placeholder="结束日期"
                @click="showCalendar = true" />
              <van-button round type="danger" size="small" style="padding: 0px 20px;"> 筛选 </van-button>
              <van-calendar v-model="showCalendar" @confirm="onConfirm" type="range" />
            </div>
          </div>
          <div style="margin-top: 20px;margin-bottom: 50px;">
            <van-cell-group inset v-for="item in data" :key="item.id" style="margin-bottom: 10px;">
              <van-cell>
                <template #title>任务编号：{{ item.transportTaskId }}</template>
                <template #label>
                  <van-steps direction="vertical" :active="3" center>
                    <van-step style="height: 22px;">
                      <template #inactive-icon>
                        <p style="width: 22px;
                       background-color: #000;color: #fff;text-align: center;line-height: 22px; border-radius: 50%; ">起</p>
                      </template>
                      <p>{{item.startAddress}}</p>
                    </van-step>
                    <van-step style="height: 22px;">
                      <template #inactive-icon>
                        <p style="width: 22px;
                       background-color: #ff0000;color: #fff;text-align: center;line-height: 22px; border-radius: 50%;">止</p>
                      </template>
                      <p>{{item.endAddress}}0</p>
                    </van-step>
                  </van-steps>
                </template>
              </van-cell>

              <van-cell >
                <template #title>交货时间：{{ item.actualArrivalTime }}</template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
import { getList } from '@/api/task'
export default {
  name: 'taskIndex',
  data () {
    return {
      active: 2,
      search: '',
      // 日历弹出框
      showCalendar: false,
      // 开始日期
      valueOne: '',
      valueTwo: '',
      // 获取信息
      data: ''
    }
  },
  methods: {
    // 日历选择后的数据返回给input框
    formatDate (date) {
      const year = date.getFullYear()
      let mounth = date.getMonth()
      let day = date.getDate()
      if (mounth < 10) {
        mounth = '0' + date.getMonth()
      }
      if (day < 10) {
        day = '0' + date.getDate()
      }
      return `${year}-${mounth}-${day}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.valueOne = this.formatDate(start)
      this.valueTwo = this.formatDate(end)
      this.showCalendar = false
    },
    // 请求已完成的数据页面
    async getList (num) {
      const res = await getList(num)
      this.data = res.data.data.items
      console.log(res)
    }
  },
  watch: {
    active (val) {
      if (val === 2) {
        this.getList(6)
        console.log('这是已完成订单页面')
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .custom-image{
    margin-top: 40%;
    left: -5%;
  }
  .imga {
    height: 100%;

    ::v-deep img {
      width: 200px !important;
      height: 120px !important;
    }
  }
}

.shaixuan {
  display: flex;
  background-color: #fff;
  height: 50px;
  // padding-top: 10px;
  align-items: center;

  .van-cell {
    width: 140px;

    ::v-deep .van-field__control {
      // width: 114px;
      text-align: center;
      color: #818181;
      background-color: rgb(244, 244, 244);
      border-radius: 10px;
      height: 30px;
    }

    ::placeholder {
      text-align: center;
      color: #818181;
    }

  }
}
</style>
